<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录系统</title>
    <script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div style="margin-top:50px;margin-left:40%;">
    <h1 style="padding-left:50px;">用户登录</h1>
    姓名：<input id="username" type="text" >
    <p>
        密码：<input id="password"  type="password" >
    <p>
    <div style="padding-left:50px;">
        <input type="button" value=" 提 交 " onclick="mySubmit()"> &nbsp;&nbsp;&nbsp;
<!--        <input type="reset" value=" 重 置 ">-->
    </div>
</div>
<script>
    // ajax 请求登录
    function mySubmit(){
        // 非空效验
        var username = jQuery("#username");
        var password = jQuery("#password");
        if(""==jQuery.trim(username.val())){
            alert("请先输入用户名！");
            username.focus();
            return;
        }
        if(""==jQuery.trim(password.val())){
            alert("请先输入密码！");
            password.focus();
            return;
        }
        jQuery.ajax({
            url:"login-ajax", // 设置请求地址
            type:"POST", // 设置请求方法类型
            contentType:"application/json; charset=utf-8", // 请求类型
            // dataType:"", // 响应的类型
            //将对象转换成json字符串
            data:JSON.stringify({"username":username.val(),"password":password.val()}), // 请求参数
            success:function(data){
                alert(data);
            }
        });
    }
</script>
</body>
</html>